import { formatMoney, _isMobile } from '@/utils/common'

/**
 * 创建同比统计图
 * @param {*} data
 */
export function createChart (title, categories, seriesArrayBar, seriesArrayLine) {
  if (_isMobile()) {
    categories = categories.splice(6)
    seriesArrayBar = seriesArrayBar.splice(6)
    seriesArrayLine = seriesArrayLine.splice(6)
  }
  let option = {
    'title': {
      'text': title + '（元）',
      x: '1%',
      padding: [10, 10],
      textStyle: {
        color: '#000',
        fontSize: '14',
        fontWeight: 500
      },
      subtextStyle: {
        color: '#90979c',
        fontSize: '14'

      }
    },
    toolbox: { // 可视化的工具箱
      show: true,
      x: '70%',
      top: '2%',
      feature: {
        saveAsImage: {// 保存图片
          show: true
        },
        dataView: { // 数据视图
          show: true
        }
      }
    },
    'tooltip': {
      'trigger': 'axis',
      'axisPointer': {
        'type': 'shadow',
        textStyle: {
          color: '#fff'
        }
      },
      formatter: function (params) {
        var res = ''
        var myseries = option.series
        for (var i = 0; i < myseries[0].data.length; i++) {
          if (myseries[0].data[i].name === params[0].name) {
            res += myseries[0].data[i].name + ': ' + formatMoney(myseries[0].data[i].value) + '元</br>'
            res += '升/降比例: ' + myseries[1].data[i].growthratio + '%</br>'
          }
        }
        return res
      }
    },
    'grid': {
      borderWidth: 0,
      top: '15%',
      right: '0%',
      left: '7%',
      bottom: '12%',
      textStyle: {
        color: '#000'
      }
    },
    'legend': {
      data: [title, '升/降比例'],
      x: '40%',
      top: '2%',
      textStyle: {
        color: '#90979c'
      }
    },
    'calculable': true,
    'xAxis': [{
      'type': 'category',
      'axisLine': {
        lineStyle: {
          color: '#90979c'
        }
      },
      'axisLabel': {
        'interval': 0
      },
      'data': categories
    }],
    'yAxis': [{
      'type': 'value',
      'axisLine': {
        lineStyle: {
          color: '#90979c'
        }
      },
      'axisLabel': {
        'interval': 0,
        formatter: function (value, index) {
          if (value >= 100000000) {
            return value / 100000000 + '亿'
          } else if (value >= 10000000) {
            return value / 10000000 + '千万'
          } else if (value >= 10000) {
            return value / 10000 + '万'
          } else if (value <= -100000000) {
            return value / 100000000 + '亿'
          } else if (value <= -10000000) {
            return value / 10000000 + '千万'
          } else if (value <= -10000) {
            return value / 10000 + '万'
          } else if (value >= 0 && value < 10000) {
            return value
          }
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(131,101,101,0.2)',
          type: 'dashed'
        }
      }
    }],
    'series': [{
      'name': title,
      'type': 'bar',
      'stack': '总量',
      'barMaxWidth': 30,
      'barGap': '10%',
      'itemStyle': {
        'normal': {
          'color': '#00BD89',
          'label': {
            'show': false,
            'textStyle': {
              'color': '#fff',
              'fontSize': '12'
            },
            'position': 'insideTop'
            // formatter: function (p) {
            //   return p.value > 0 ? formatMoney(p.value) : ''
            // }
          }
        }
      },
      'data': seriesArrayBar
    },
    {
      'name': '升/降比例',
      'type': 'line',
      'stack': '总量',
      symbolSize: 7,
      // symbol: 'circle',
      'itemStyle': {
        'normal': {
          'color': '#4A7FBB',
          'barBorderRadius': 0,
          'label': {
            'textStyle': {
              // 'color': '#000',
              'fontSize': '13'
            },
            'show': true,
            'position': 'top',
            formatter: function (p) {
              return p.data.growthratio > 0 ? ('+' + p.data.growthratio + '%') : (p.data.growthratio + '%')
            }
          }
        }
      },
      'data': seriesArrayLine
    }]
  }
  return option
}

/**
 * 创建环状饼图
 * @param {*} data
 */
export function createPieChart (title, subTitle, data) {
  // var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']
  var colorList = ['#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac']
  let option = {
    color: colorList,
    title: {
      // text: title,
      subtext: subTitle,
      left: '41%',
      top: '43%',
      // textStyle: {
      //   color: '#000',
      //   fontSize: 15
      // },
      subtextStyle: {
        color: '#000',
        fontWeight: 300,
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'item'
    },
    series: [{
      type: 'pie',
      center: ['48%', '50%'],
      radius: ['35%', '60%'],
      clockwise: true,
      avoidLabelOverlap: true,
      hoverOffset: 10,
      itemStyle: {
        normal: {
          color: function (params) {
            return colorList[params.dataIndex]
          }
        }
      },
      label: {
        show: true,
        position: 'outside',
        formatter: '{a|{b}{d}%}\n{hr|}',
        rich: {
          hr: {
            backgroundColor: 't',
            borderRadius: 3,
            width: 3,
            height: 3,
            padding: [3, 3, 0, -12]
          },
          a: {
            padding: [-30, 1, -20, 1]
          }
        }
      },
      tooltip: {
        formatter: function (param) {
          if (param.data.type == null) {
            return param.data.name + '：' + formatMoney(param.value) + '万'
          } else {
            return param.data.type + '：' + formatMoney(param.value) + '万'
          }
        }
      },
      labelLine: {
        normal: {
          length: 15,
          length2: 20,
          lineStyle: {
            width: 1,
            fontSize: 14
          }
        }
      },
      data: data
    }]
  }
  return option
}

/**
 * 创建环状饼图--费用
 * @param {*} data
 */
export function createPieChartFee (title, subTitle, data) {
  // var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF']
  var colorList = ['#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc', '#ff55ac']
  let option = {
    color: colorList,
    title: {
      // text: title,
      // subtext: subTitle + '笔',
      left: '46%',
      top: '43%',
      // textStyle: {
      //   color: '#000',
      //   fontSize: 15
      // },
      subtextStyle: {
        color: '#000',
        fontWeight: 300,
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'item'
    },
    series: [{
      type: 'pie',
      center: ['48%', '50%'],
      radius: ['35%', '60%'],
      clockwise: true,
      avoidLabelOverlap: true,
      hoverOffset: 10,
      itemStyle: {
        normal: {
          color: function (params) {
            return colorList[params.dataIndex]
          }
        }
      },
      label: {
        show: true,
        position: 'outside',
        formatter: '{a|{b}{d}%}\n{hr|}',
        rich: {
          hr: {
            backgroundColor: 't',
            borderRadius: 3,
            width: 3,
            height: 3,
            padding: [3, 3, 0, -12]
          },
          a: {
            padding: [-30, 1, -20, 1]
          }
        }
      },
      tooltip: {
        formatter: function (param) {
          if (param.data.type == null) {
            return param.data.name + '：' + param.value + '笔'
          } else {
            return param.data.type + '：' + param.value + '笔'
          }
        }
      },
      labelLine: {
        normal: {
          length: 15,
          length2: 20,
          lineStyle: {
            width: 1,
            fontSize: 14
          }
        }
      },
      data: data
    }]
  }
  return option
}

/**
 * 创建环状饼图--完成率
 * @param {*} data
 */
export function createRateChart (statType, weekRate, quarterRate, yearRate) {
  var data = [
    {
      name: '周贡献率',
      value: weekRate
    }, {
      name: '季度考核',
      value: quarterRate
    }, {
      name: statType === 'income' ? '下半年考核' : '年度考核',
      value: yearRate
    }]
  var titleArr = []
  var seriesArr = []
  var sCenter
  var TitleXy = {}
  var colors = [['#40C9C6', '#E7E7E7'], ['#FF800D', '#E7E7E7'], ['#FF4A1A', '#E7E7E7']]
  data.forEach(function (item, index) {
    sCenter = [index * 35 + 15 + '%', '36%']
    TitleXy = {
      left: index * 35 + 14 + '%',
      top: '70%'
    }
    titleArr.push(
      {
        text: item.name,
        left: TitleXy.left,
        top: TitleXy.top,
        textAlign: 'center',
        textStyle: {
          fontWeight: 'bold',
          fontSize: '15',
          color: colors[index][0],
          textAlign: 'center'
        }
      }
    )
    seriesArr.push(
      {
        name: item.name,
        type: 'pie',
        clockWise: false,
        radius: [50, 60],
        itemStyle: {
          normal: {
            color: colors[index][0],
            shadowColor: colors[index][0],
            shadowBlur: 0,
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        },
        hoverAnimation: false,
        center: sCenter,
        data: [{
          value: item.value,
          label: {
            normal: {
              formatter: function (params) {
                return params.value + '%'
              },
              position: 'center',
              show: true,
              textStyle: {
                fontSize: '15',
                fontWeight: 'bold',
                color: colors[index][0]
              }
            }
          }
        }, {
          value: 100 - item.value,
          name: 'invisible',
          itemStyle: {
            normal: {
              color: colors[index][1]
            },
            emphasis: {
              color: colors[index][1]
            }
          }
        }]
      }
    )
  })
  let option = {
    backgroundColor: '#fff',
    title: titleArr,
    series: seriesArr
  }
  return option
}
